<template>
  <div>
    <div style="font-size: 16px;padding: 20px 0;color: rgb(160, 160, 160)">发起我的讨论</div>
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" style="margin-bottom: 12px;">
    </el-input>
    <el-upload action="http://www.jiatingyigou.com:3007/upload/img" :limit="limit" :file-list="imgList"
               list-type="picture-card"
               :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="primary" style="margin-left: 150px;margin-top: 10px;" @click="addDiscussion">发起讨论</el-button>
  </div>
</template>

<script>
  import {addDiscoussion} from "@/api/user"
  import {getData} from "@/utils/auth"

  export default {
    components: {},
    data() {
      return {
        limit: 9,
        imgList: [],
        textarea: "",
        dialogVisible: false,
        dialogImageUrl: ""
      }

    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      addDiscussion() {
        let content = this.textarea
        let imgs = this.imgList
        let user = getData()
        if (user.nickName) {
          addDiscoussion(content, imgs, user).then((res) => {
            if (res.message == "ok") {
              this.$message({
                type: "success",
                message: "添加讨论成功!"
              });
              this.$router.push({path: "/view"})
            }
          })

        } else {
          this.$router.push({path: "/user/login"})
        }


      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        var newImg = {
          uid: file.raw.uid,
          url: "http://" + res.data.url,
        }
        this.imgList.push(newImg)
      },
    }
  }

</script>

<style>

</style>
